import { View, Image, Text } from "@tarojs/components"
import { TBar, TBlock, TPage } from "../../../shared/ui"
import back from '../../../theme/user/mini_back.png'
import defaultAvatar from '../../../theme/user/default_avatar.png'
import vip from '../../../theme/user/vip.png'

import one from '../../../theme/main/one.png'
import two from '../../../theme/main/two.png'
import three from '../../../theme/main/three.png'
import four from '../../../theme/main/four.png'
import itemBack from '../../../theme/user/item.png'


import zijin from '../../../theme/user/zijin.png'
import right from '../../../theme/user/right.png'
import dingdan from '../../../theme/user/dingdan.png'
import tuandui from '../../../theme/user/tuandui.png'
import fenxiang from '../../../theme/user/fenxiang.png'
import { useState } from "react"
import { useDidHide, useDidShow } from "@tarojs/taro"

const Main = () => {

  const [show, setShow] = useState(true)
  useDidShow(() => {
    setShow(() => { return true })
  })
  useDidHide(() => {
    console.log('hide')
    setShow(() => { return false })
  })
  const items = [
    { text: '资金记录', imageSrc: zijin },
    { text: '订单记录', imageSrc: dingdan },
    { text: '团队代理', imageSrc: tuandui },
    { text: '分享', imageSrc: fenxiang },
    // 使用导入的图像填充更多元素
  ];

  return show && <TPage>

    <TBar title={'我的'} />

    <TBlock>
      <View className="w-full h-[172px] rounded p-[30px] bg-center bg-no-repeat mt-[20px]" style={{ backgroundImage: `url(${back})` }}>
        <Image src={defaultAvatar} className="w-[112px] h-[112px] rounded-xl" />
        <View className="inline-block text-[32px] ml-[10px]">
          <View>
            <span className="font-medium">UID:</span>
            <span className="font-normal">123123123</span>
          </View>
          <View className="flex justify-start">
            <Image src={vip} className="w-[56px] h-[56px]" />
            <span className="text-[#10E3BB] leading-[56px]">:</span>
            <span className="text-[#FFF] leading-[56px] ml-[6px]">2</span>
          </View>
        </View>
      </View>
    </TBlock>


    <TBlock>
      <View className="flex justify-between mt-[40px]">
        <View className="flex flex-col text-center">
          <Image className="w-[104px] h-[104px]" src={one} />
          <span className="text-white text-[28px] mt-[8px]">资产</span>
        </View>
        <View className="flex flex-col text-center">
          <Image className="w-[104px] h-[104px]" src={two} />
          <span className="text-white text-[28px] mt-[8px]">充值</span>
        </View>
        <View className="flex flex-col text-center">
          <Image className="w-[104px] h-[104px]" src={three} />
          <span className="text-white text-[28px] mt-[8px]">兑换</span>
        </View>
        <View className="flex flex-col text-center">
          <Image className="w-[104px] h-[104px]" src={four} />
          <span className="text-white text-[28px] mt-[8px]">客服</span>
        </View>
      </View>

    </TBlock>


    <TBlock>
      <View className="mt-[34px]">
        {items.map((item, index) => (
          <View className="mb-[30px] w-full h-[98px] bg-center bg-no-repeat px-[30px] text-[#FBFDFF] text-[32px] flex items-center justify-between" style={{ backgroundImage: `url(${itemBack})` }}>
            <View className="inline-flex items-center">
              <Image src={item.imageSrc} className="w-[40px] h-[40px] mr-[10px]" />
              <Text>{item.text}</Text>
            </View>
            <Image src={right} className="w-[32px] h-[32px]" />
          </View>
        ))}
      </View>

    </TBlock>

    <TBlock>
      <View className="bg-[#191933] w-full h-[98px] text-center text-[#666678] mt-[80px] text-[32px] flex items-center justify-center">
        退出登录
      </View>
    </TBlock>
  </TPage>
}

export default Main
